<template>
  <div>
    <div @click="change">
      <h1>Welcome to<br />敏宝の前端小窝</h1>
      <div class="background"><span>MIN</span></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "../../components/Header";
export default {
  name: "myhome",
  components: {
    Header,
  },
  mounted() {
    const background = document.querySelector(".background");
    document.addEventListener("scroll", () => {
      const scrollY = window.scrollY;
      if (scrollY !== 0) {
        background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`;
      } else {
        background.style.backgroundPosition = "";
      }
    });
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.background {
  position: absolute;
  background-image: url("./images/myHome1.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  width: 100%;
  font: 900 39rem "";
  height: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.background::before {
  content: "";
  background-size: cover;
  background-image: inherit;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -99;
}
h1 {
  position: absolute;
  text-align: center;
  width: 100%;
  letter-spacing: 10px;
  color: #fff;
}
</style>